<template>
    <div class="workProcess-add">
        <a-modal width="90%" :visible="visible" :title="modalOption.title" @ok="modalOption.onOk" @cancel="modalOption.onCancel"
            :okText="modalOption.okText" :cancelText="modalOption.cancelText" class="yuan-modal workProcess-add-modal">
            <a-spin tip="Loading..." :spinning="formLoading">
                <a-form-model layout="inline" class="yuan-form" ref="form" :model="formData" :rules="rules"
                    :label-col="{ style: { width: '100px' } }" :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">
                        <div class="form-panel-box ">
                            <a-form-model-item class="yuan-form-item yuan-form-col3" label="工艺名称" prop="craftName">
                                <a-input class="yuan-form-input" v-model="formData.craftName" placeholder="请输入"></a-input>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item yuan-form-col3" label="半成品类型" prop="productType">
                                <a-select class="yuan-form-input" v-model="formData.productType" placeholder="请选择" @change="productChange">
                                    <a-select-option value="中药饮片(半成品)">中药饮片(半成品)</a-select-option>
                                    <a-select-option value="直服饮片(半成品)">直服饮片(半成品)</a-select-option>
                                    <a-select-option value="单方饮片(半成品)">单方饮片(半成品)</a-select-option>
                                </a-select>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item yuan-form-col3" label="名称" prop="materialCode">
                                <a-select v-if="formData.productType" class="yuan-form-input" v-model="formData.varietyName" placeholder="请选择" show-search
                                    :filter-option="$filterOption">
                                    <a-select-option :value="item" v-for="item in materialList" :key="item">{{item}}</a-select-option>
                                </a-select>
                                <span v-else>请选择半成品类型</span>
                            </a-form-model-item>
                            <div class="clear-both"></div>
                            <a-form-model-item label="执行标准" class="yuan-form-item" v-if="pageReady">
                                <Upload :uploadLength="99" @uploadChange="uploadChangeExe" :defImgList="executiveStandardList" />
                                <div class="upload-tips">jpg.png.gif格式.不超过2MB</div>
                            </a-form-model-item>
                        </div>
                    </div>
                    <div class="form-panel">
                        <div class="form-panel-title"></div>
                        <div class="form-panel-box">
                            <div class="process-box">
                                <template v-for="(item, idx) in processStep">
                                    <i class="iconfont process-next" v-if="idx !== 0" :key="idx">&#xeb08;</i>
                                    <div class="process-list" :key="'precess_'+idx">
                                        <a-icon class="precess-del c-danger" type="close" @click="removePrecess(idx)"
                                            v-if="processStep.length>1" />
                                        <div class="list-title">工序{{ idx + 1 }}</div>
                                        <a-form-model-item style="width: 100%;" label="工艺名称：">
                                            <a-input v-model="item.processName" placeholder="请输入工艺名称" />
                                        </a-form-model-item>
                                        <a-form-model-item label="工艺图片：">
                                            <Upload :uploadLength="1" @uploadChange="(e)=>uploadChangeProcess(e,idx)"
                                                :defImgList="item.processPicture ? [item.processPicture] : []"
                                                :key="'precess_upload_'+idx" v-if="pageReady" />
                                        </a-form-model-item>
                                    </div>
                                </template>
                                <a-button class="process-add" type="primary" @click="addProcess">
                                    新增工序
                                </a-button>
                            </div>
                        </div>
                    </div>
                </a-form-model>
            </a-spin>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import nextApi, { MaterialListRes, ProListRes } from "@/api/nextApi";
import Upload from "@/components/upload.vue";
@Component({
    name: "Add",
    components: { Upload },
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: "" }) infoId!: string;
    @Watch("visible")
    visibleChange() {
        if (this.visible) this.getDetail();
        this.modalOption.title = this.infoId ? "编辑工艺" : "添加工艺";
    }
    processStep: { processName: string; processPicture: string; defImgList?: string[] }[] = [];
    pageReady = false;
    formLoading = false;
    modalOption = {
        title: "添加工艺",
        okText: "保存",
        cancelText: "取消",
        onOk: () => {
            this.modalOk();
        },
        onCancel: () => {
            this.closeModal();
        },
    };
    rules = {
        craftName: [{ required: true, message: "请输入工艺名称", trigger: "blur" }],
        productType: [{ required: true, message: "请选择半成品类型", trigger: "blur" }],
    };
    formData: any = {
        materialCode:'',
        varietyName:'',
    };
    resetForm() {
        this.formData = {
            materialCode:'',
            varietyName:'',
        };
    }
    async mounted() {
        this.resetForm();
    }
    productChange(){
        this.formData.varietyName = ""
        this.getMaterials()

    }
    closeModal() {
        this.pageReady = false;
        this.resetForm();
        (this.$refs.form as any).resetFields();
        this.$emit("closeModal");
    }
    modalOk() {
        (this.$refs.form as any).validate(async (valid: any) => {
            if (valid) {
                try {
                    this.formLoading = true;
                    delete this.formData.processStep;
                    const res = await nextApi.editProcess({
                        ...this.formData,
                        executiveStandard: this.executiveStandardList.join(";"),
                        processStepJSON: this.processStep,
                    });
                    this.$message.success(res.msg);
                    this.closeModal()
                    this.$emit("resetList");
                } finally {
                    this.formLoading = false;
                }
            }
        });
    }
    uploadChangeExe(e: { url: string }[]) {
        this.executiveStandardList = e.map((item) => item.url);
    }
    uploadChangeProcess(e: { url: string }[], idx: number) {
        this.processStep[idx].processPicture = e[0] ? e[0].url : "";
    }
    executiveStandardList: string[] = [];
    async getDetail() {

        this.formLoading = true;
        try {
            if (this.infoId) {
                const res = await nextApi.getProcessDetail({ id: this.infoId });

                this.formData = { ...res.data };
                await this.getMaterials(true)
                this.executiveStandardList = res.data.executiveStandard ? res.data.executiveStandard.split(";") : [];
                this.processStep = res.data.processStep;
            } else {
                this.executiveStandardList = [];
                this.processStep = [{ processName: "", processPicture: "" }];
            }
            this.pageReady = true;
        } finally {
            this.formLoading = false;
        }
    }
    materialList: MaterialListRes[] = [];
    async getMaterials(edit?:boolean) {
        // if (this.materialList && this.materialList.length > 0) return;
        const res = await nextApi.getMaterialNameList({
            productType:this.formData.productType,
            varietyName:edit ? '':this.formData.varietyName
        });
        this.materialList = res.data || [];
        this.formData.materialCode = this.materialList[0]
    }
    addProcess() {
        this.processStep.push({ processName: "", processPicture: "" });
    }
    removePrecess(idx: number) {
        this.processStep.splice(idx, 1);
    }
}
</script>
<style lang="scss">
.workProcess-add-modal {
    .process-box {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 0 10px;
        .ant-upload-picture-card-wrapper {
            width: 150px;
            height: 150px;
        }
        .ant-upload-list-picture-card-container {
            width: 150px;
            height: 150px;
        }
        .ant-upload-list-picture-card .ant-upload-list-item {
            width: 150px;
            height: 150px;
        }

        .ant-upload.ant-upload-select-picture-card {
            width: 150px;
            height: 150px;
        }

        .ant-input {
            width: 150px;
        }
    }

    .process-list {
        border: solid 1px #eee;
        padding: 10px 0;
        width: 310px;
        margin-bottom: 10px;
        position: relative;
    }

    .list-title {
        font-size: 16px;
        color: #111;
        padding-left: 30px;
    }

    .process-next {
        font-size: 28px;
        font-weight: bold;
        padding: 0 10px;
    }

    .process-add {
        margin-left: 20px;
    }
    .precess-del {
        position: absolute;
        right: 10px;
        top: 10px;
    }

    .upload-tips {
        font-size: 12px;
        line-height: 20px;
        padding-bottom: 5px;
        color: #05b089;
    }
}
</style>
